<template>
	<view class="bg-f3 w-100vw p-30 border-box position-r h100vh">
		<view class="text-right line-h-60 m-b-10 font-30" @click="edit" v-if="cartList.length > 0">编辑</view>
		<scroll-view type="custom" scroll-y class="scrollBox">
			<view class="b-r-10 bg-white p-20 flex m-b-20" v-for="(item,index) in cartList" :key="index">
				<view class="flex flex-col-center">
				<!-- 	<u-checkbox-group @change="chooeseGoods(index)" active-color="#ECA52B">
						<u-checkbox v-model="item.checked"></u-checkbox>
					</u-checkbox-group> -->
					<checkbox-group @change="chooeseGoods(index)">
						<label>
							<checkbox :checked="item.checked" />
						</label>
					</checkbox-group>
				</view>
				<view class="flex w-100">
					<image class="goodsImg b-r-10 m-l-6" :src="item.productUrl" mode="" @click="clickToPath(item.productId)" />
					<view class="m-l-10 flex-1 flex flex-col justify-between border-box">
						<view class="line-2 m-t-10 font-26 font-w-600" @click="clickToPath(item.productId)">{{ item.productName }}</view>
						<view class="color-g line-2 m-t-10 font-24 font-w-600" @click="clickToPath(item.productId)">{{ item.specValue }}</view>
						<view class="flex m-t-20 justify-between">
							<view class="color-r" @click="clickToPath(item.productId)"> 
								<text class="font-24">￥</text>
								<text class="font-b font-30">{{ item.balancePrice }}</text>
							</view>
							<u-number-box v-model="item.buyCount" @change="onChangeNum($event,item,index)"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<empty :show="cartList.length == 0" />
			<u-loadmore :status="status" color="#cccccc" class="padding-bottom padding-top-xs"/>
		</scroll-view>
		<view style="width: 100%;height: 100rpx;"></view>
		<view class="submitBox w-100 bg-white p-l-20 p-r-20 border-box position-a" v-if="cartList.length > 0">
			<view class="flex justify-between flex-col-center" v-if="editType == 'submitOrder'">
				<view class="flex flex-col-center">
					<checkbox-group @change="chooeseAll">
						<label>
							<checkbox :checked="chooeseAllBool" />全选
						</label>
					</checkbox-group>
					<view class="line-h-100 m-l-20">
						<text class="font-30">合计：</text>
						<text class="font-24 font-b color-r">￥</text>
						<text class="font-34 font-b color-r">{{ totalMoney || 0}}</text>
					</view>
				</view>
				<view class="bg-yellow p-l-20 p-r-20 p-t-6 p-b-6 color-w font-24 b-r-10" @click="clickToSubmit">提交订单</view>
			</view>
			<view class="flex h-100 flex-end flex-col-center" v-else>
				<view class="bg-yellow p-l-30 p-r-30 p-t-6 p-b-6 color-w font-24 b-r-10" @click="deleteCartGoods">删除</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState, mapActions } from 'vuex'
	import { postDleCart, postEditCart,getShoppingCartList,deleteCartGoods,addCartGoodsNum} from '@/common/api/shoppingCart.js'
	import { getGoodsSkuDetail, getPreferenceGoodsList, getSubareaList } from '@/common/api/goods.js'
	import { Debounce } from '@/common/utils/tools.js'
	export default {
		data() {
			return {
				cartList: [],
				pageNo: 1,
				total: 0,
				editType: 'submitOrder',
				totalMoney: 0,
				status: 'loading',
				chooeseAllBool: false,
			}
		},
		computed: {
			...mapState({
				cartInfo: state => state.init.cartInfo,
				cartCheckMap: state => state.init.cartCheckMap,
				isLogin: state => state.user.isLogin
			}),
		},
		onShow() {
			this.chooeseAllBool = false
			this.totalMoney = 0
			this.pageNo = 1;
			this.cartList = []
			this.getGoodsList()
		},
		onReachBottom() {
			this.pageNo = this.pageNo + 1;
			this.getwalletFlow()
		},
		methods: {
			chooeseAll(){
				let dataList = JSON.parse(JSON.stringify(this.cartList));
				let totalMoney = 0;
				if(this.chooeseAllBool){
					this.chooeseAllBool = false				
					dataList.forEach(item => {
						item.checked = false
						totalMoney = 0
					})
				}else{
					this.chooeseAllBool = true
					dataList.forEach(item => {
						item.checked = true
						totalMoney = Number(Number(totalMoney) + (Number(item.balancePrice) * Number(item.buyCount))).toFixed(2)
					})
				}
				this.totalMoney = totalMoney
				this.cartList = dataList;
			},
			// 点击商品
			clickToPath(id){
				uni.navigateTo({
					url: '/pages/product/productDetails?productId='+id
				})
			},
			// 改变数量
			onChangeNum(e,data,index){
				let totalMoney = 0;
				let str = "?num="+e.value+'&cartId='+data.cartId;
				addCartGoodsNum(str).then(res => {
					let dataList = JSON.parse(JSON.stringify(this.cartList));
					if(res.code == 200){
						dataList.forEach(item => {
							if(item.cartId == data.cartId){
								item.buyCount = e.value
							}
							if(item.checked){
								totalMoney = Number(Number(totalMoney) + (Number(item.balancePrice) * Number(item.buyCount))).toFixed(2)
							}
						})
						this.totalMoney = totalMoney
						this.cartList = dataList;
					}else{
						dataList.forEach((item,indexx) => {
							if(indexx == index){
								item.buyCount = item.buyCount - 1
							}
							if(item.checked){
								totalMoney = Number(Number(totalMoney) + (Number(item.balancePrice) * Number(item.buyCount))).toFixed(2)
							}
						})
						this.cartList = dataList;
					}
				})
			},
			// 购物车列表
			getGoodsList(){
				this.status = 'loading'
				let data = {
					pageNo: this.pageNo,
					pageSize: 10
				}
				getShoppingCartList(data).then(res => {
					if(res.code === 200){
						res.data.forEach(item => {
							item.checked = false
						})
						if(this.pageNo == 1){
							this.cartList = res.data
						}else{
							this.cartList = this.cartList.concat(res.data)
						}
						if (this.cartList.length == res.extend.total) {
							this.status = 'nomore'
						}
					}
				})

			},
			//提交订单
			clickToSubmit(){
				let arr = [];
				this.cartList.forEach(item => {
					if(item.checked){
						item['pic'] = item.productUrl
						item['platformPrice'] = item.balancePrice
						arr.push(item)
					}
				})
				if(arr.length == 0){
					this.$msg('请先勾选下单商品')
					return
				}
				uni.setStorageSync('skuGoodsInfo', arr)
				uni.removeStorageSync('chooeseAddrressData')//移除选择地址
				uni.navigateTo({
					url: '/pages/order/placeOrder?type=cart'
				})
			},
			// 点击编辑
			edit(){
				if(this.editType == 'submitOrder'){
					this.editType = 'delete'
				}else{
					this.editType = 'submitOrder'
				}
			},
			// 勾选商品
			chooeseGoods(index){
				let dataList = this.cartList;
				let totalMoney = 0;
				dataList.forEach((item,ind) => {
					if(index == ind){
						item.checked = !item.checked
					}
					if(item.checked){
						totalMoney = Number(Number(totalMoney) + (Number(item.balancePrice) * Number(item.buyCount))).toFixed(2)
					}
				})
				this.cartList = dataList
				this.totalMoney = totalMoney
			},
			// 删除购物车商品
			deleteCartGoods(){
				let ids = []
				this.cartList.forEach(item => {
					if(item.checked){
						ids.push(item.cartId)
					}
				})
				if(ids.length == 0){
					this.$msg('请先勾选删除商品')
					return
				}
				let data = {
					cartId: ids.join(",")
				}
				deleteCartGoods(data).then(res => {
					if(res.code == 200){
						this.$msg('删除成功')
						this.pageNo = 1
						this.cartList = []
						this.getGoodsList()
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	page {
		max-height: calc(100vh - 100rpx) !important;
		min-height: 90vh !important;
		overflow-y: hidden;
		background-color: #f7f7f7 !important;
	}
	.goodsImg{
		width: 210rpx;
		height: 210rpx;
	}
	.h100vh{
		height: calc(100vh - 100rpx);
		overflow-y: hidden;
	}
	.scrollBox{
		height: calc(100vh - 330rpx);
	}
	.submitBox{
		height: 100rpx;
		bottom: 0;
		left: 0;
	}/* 自定义 checkbox 的样式 */
</style>
<style lang="scss">
::v-deep .uni-checkbox-input{
	width: 18px !important;
	height: 18px !important;
}
::v-deep .uni-checkbox-input-checked{
	color: #fff !important;
	background: #f49d2c !important;
	border-color: #f49d2c !important;
}
</style>
